<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
import { SysApiResource } from "@/entity/SysApiResource";
import { OperationType } from "@/entity/OperationType";
import { AxiosError } from "axios";
import { ElMessage } from "element-plus";
import apiResourceService from "@/services/api-resource.service";
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        require: false,
    },
    operation: {
        type: String,
        require: false,
    },
});

const emits = defineEmits(["update:visible"]);

const entity = ref(new SysApiResource());
const saveLoading = ref(false);

const showDialog = ref(false);

watch(
    () => props.visible,
    async (value) => {
        showDialog.value = value;
        if (showDialog.value == true) {
            if (props.operation == OperationType.CREATE) {
                create();
            } else if (props.operation == OperationType.EDIT) {
                edit();
            }
        }
    }
);

const load = async () => {
    try {
        if (props.id == null) {
            return;
        }
        const e = await apiResourceService.retrieve(props.id);
        entity.value = e;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
    }
};

const create = async () => {
    entity.value = new SysApiResource();
}


const edit = async () => {
    await load();
}

const save = async () => {
    try {
        saveLoading.value = true;
        if (props.operation == OperationType.CREATE) {
            await apiResourceService.insert(entity.value);
        } else if (props.operation == OperationType.EDIT) {
            await apiResourceService.update(entity.value);
        }
        ElMessage({ message: "保存成功", type: "success" });
        emits("update:visible", false);
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        saveLoading.value = false;
    }
}

onMounted(() => {
});

const cancel = () => {
    emits("update:visible", false);
}

const closeDialog = () => {
    cancel();
};
</script>

<template>
    <ElDialog v-model="showDialog" :width="500" @close="closeDialog()" title="API资源详情">
        <ElForm v-model="entity" label-width="120px" class="form">
            <ElFormItem label="名称">
                <ElInput v-model="entity.name"></ElInput>
            </ElFormItem>
            <ElFormItem label="URL">
                <ElInput v-model="entity.url"></ElInput>
            </ElFormItem>
            <ElFormItem label="请求方法">
                <ElInput v-model="entity.method"></ElInput>
            </ElFormItem>
            <ElFormItem label="后端方法">
                <ElInput v-model="entity.handler"></ElInput>
            </ElFormItem>
            <ElFormItem label="需要登录">
                <ElRadioGroup v-model:model-value="entity.requireLogin">
                    <ElRadio :label="true">是</ElRadio>
                    <ElRadio :label="false">否</ElRadio>
                </ElRadioGroup>
            </ElFormItem>
            <ElFormItem label="需要授权" v-if="entity.requireLogin">
                <ElRadioGroup v-model:model-value="entity.requirePermissions">
                    <ElRadio :label="true">是</ElRadio>
                    <ElRadio :label="false">否</ElRadio>
                </ElRadioGroup>
            </ElFormItem>
            <ElFormItem label="描述">
                <ElInput v-model="entity.description"></ElInput>
            </ElFormItem>
        </ElForm>

        <template #footer>
            <div class="dialog-footer">
                <ElButton :loading="saveLoading" @click="cancel()">取消</ElButton>
                <ElButton type="primary" :loading="saveLoading" @click="save()">保存</ElButton>
            </div>
        </template>
    </ElDialog>
</template>

<style scoped>
.form {
    max-width: 460px;
}
</style>